<template>
  <div class="stuinfoentry-container">
    <h1>学生信息录入</h1>
    <el-form ref="form" :model="form" label-width="80px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="学号">
            <el-input v-model.trim="form.stu_id"></el-input>
          </el-form-item>
          <el-form-item label="姓名">
            <el-input v-model.trim="form.stu_name"></el-input>
          </el-form-item>
          <el-form-item label="性别">
            <el-radio-group v-model="form.stu_sex">
              <el-radio label="男"></el-radio>
              <el-radio label="女"></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="籍贯">
            <el-cascader
              v-model="value"
              :options="options"
              :props="{
                label: 'name',
                value: 'name',
              }"
              @change="handleChange"
            ></el-cascader>
          </el-form-item>
          <el-form-item label="出生日期">
            <el-date-picker
              v-model="form.stu_date"
              type="date"
              placeholder="选择日期"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="男朋友或女朋友">
            <el-input v-model.trim="form.stu_gbf"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="头像">
            <el-button type="primary" @click="upload">头像上传</el-button>
            <el-button type="primary">拍照上传</el-button>
            <el-row>
              <input
                ref="getFile"
                @change="getFile"
                type="file"
                name=""
                id=""
                hidden
              />
            </el-row>
            <el-row>
              <img
                :src="form.stu_head_img"
                alt=""
                srcset=""
                width="150px"
                height="150px"
              />
              <p>图片大小为1M左右，否则不能上传</p>
            </el-row>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-form-item label="爱好和自我评价">
          <!-- 富文本编辑器 -->
          <Toolbar
            style="border-bottom: 1px solid #ccc"
            :editor="editor"
            :defaultConfig="toolbarConfig"
            :mode="mode"
          />
          <Editor
            style="height: 500px; overflow-y: hidden"
            v-model="html"
            :defaultConfig="editorConfig"
            :mode="mode"
            @onCreated="onCreated"
          />
        </el-form-item>
      </el-row>
      <el-row>
        <el-button type="primary" @click="submitBtn">提交</el-button>
        <el-button type="primary">重置</el-button>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { area_req, stuInfoEntry_req } from "@/api/home.js";
import "@wangeditor/editor/dist/css/style.css";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
export default {
  data() {
    return {
      editor: null,
      toolbarConfig: {},
      mode: "default", //
      html: "<p>hello涵涵</p>",
      editorConfig: { placeholder: "请输入内容..." },
      form: {
        stu_id: "",
        stu_name: "",
        stu_sex: "男",
        stu_jg: "",
        stu_date: "",
        stu_hobby: "",
        stu_gbf: "",
        stu_head_img: "",
      },
      options: [],
      value: [],
    };
  },
  created() {
    this.getArea();
  },
  components: {
    Editor,
    Toolbar,
  },
  methods: {
    async submitBtn() {
      // 收集数据
      this.form.stu_hobby = this.editor.getText();
      console.log(this.form);
      // 封装api
      // 拿到封装的api 发送ajax
      const result = await stuInfoEntry_req(this.form);
      console.log(result);
    },
    onCreated(editor) {
      this.editor = Object.seal(editor); // 一定要用 Object.seal() ，否则会报错
    },
    upload() {
      //   点击upload就相当于点击input file
      //   this.getFile();
      // 获取DOM input  给input绑定click
      this.$refs.getFile.click();
    },
    // @change  上传文件 click
    getFile() {
      console.log("点击input file");
      //获取到了图片 获取到图片之后将其变为base64字符串
      console.log(this.$refs.getFile.files[0]);
      let f = this.$refs.getFile.files[0];
      let fr = new FileReader();
      //   console.log(fr);
      fr.readAsDataURL(f);
      //   console.log(fr);
      //   console.log(fr.result);
      //   fr.result直接进行获取获取不到  同步异步代码

      fr.onload = () => {
        //   fr.result就是头像图片的base64字符串
        console.log(fr.result);
        // this.form.stu_head_img  提交给服务器
        this.form.stu_head_img = fr.result;
        console.log(this.form.stu_head_img);
      };
    },
    async getArea() {
      const result = await area_req();
      this.options = result.data;
    },
    handleChange(value) {
      console.log(value);
      //   value ['天津'，'baodi']  字符串天津-宝坻
      //form.stu_jg = []
      // 数组转变为字符串 数组的每个元素中使用-隔开
      this.form.stu_jg = value.join("-");
      console.log(this.form.stu_jg);
    },
  },
  beforeDestroy() {
    const editor = this.editor;
    if (editor == null) return;
    editor.destroy(); // 组件销毁时，及时销毁编辑器
  },
};

/* 
/area请求回来的地址信息的数据 目的 将数据放到 级联选择器
options[{ch[{}]}] 页面一渲染就放到了options当中
ajax 放到到哪里进行请求 created或者mounted当中进行请求



*/
</script>

<style lang="scss" scoped>
</style>